<template>
	<view class="p-main" id="print">
		<view class="print">
			<view class="voice">
				<image :src="a" @tap="Vchange"></image>
			</view>
			<view class="input">
				<textarea :value="txt" @input="input" auto-height v-if="!isrecord" @linechange="change" :fixed="true"
					@focus="focus" @blur="blur" />
				<view class="sound" v-else @touchstart="touchstart" @touchend="touchend" @touchmove="touchmove">
					按住说话
				</view>
			</view>
			<view class="print-right" :animation="animationData">
				<view>
					<image src="../../static/img/chatroom/emoji.png" @tap="Cemoji"></image>
				</view>
				<view v-if="!btn">
					<image src="../../static/img/chatroom/add.png" @tap="cmore"></image>
				</view>
				<view class="send-btn" v-else @tap="confirm">
					发送
				</view>
			</view>
		</view>
		<view class="biaoqing" v-if="emoji">
			<emoji @emoji="send" @print="confirm" @del="del"></emoji>
		</view>
		<view class="more" v-if="more">
			<more @sendPic="sendpic" @map="getmap"></more>
		</view>
		<view class="voice-bg" v-if="bg">
			<view class="voice-time">
				<view class="voice-time-len" :style="{width:i*10+'rpx'}">
					{{i}}''
				</view>
			</view>
			<view class="voice-txt">
				上滑取消发送
			</view>
		</view>
	</view>
</template>

<script>
	import emoji from '@/components/emoji/emoji.vue'
	import more from '@/components/more/more.vue'
	const recorderManager = uni.getRecorderManager();
	import {
		mapState
	} from 'vuex'
	export default {
		name: "print",
		data() {
			return {
				//控制语音
				isrecord: false,
				a: '../../static/img/chatroom/voice.png',
				emoji: false,
				txt: '',
				linecount: 1,
				emojiarr: [],
				btn: false,
				animation: '',
				animationData: '',
				more: false,
				timer: '',
				i: 0,
				flag: false,
				bg: false,
				moveY: 0
			};
		},
		props: ['height', 'end'],
		components: {
			emoji
		},
		methods: {
			input(e) {
				this.txt = e.detail.value
				if (e.detail.value.trim().length > 0) {
					this.btn = true
				}
			},
			//语音
			Vchange() {
				this.isrecord = !this.isrecord
				if (this.emoji || this.more) {
					this.more = false
					this.emoji = false
					this.$nextTick(() => {
						this.getheight()
					})
				}
			},
			//表情功能
			Cemoji() {
				this.emoji = !this.emoji
				this.more = false
				this.isrecord = false
				// setTimeout(() => {
				// 	this.getheight()
				// }, 0)
				this.$nextTick(() => {
					this.getheight()
				})
			},
			//更多功能
			cmore() {
				this.more = !this.more
				this.emoji = false
				this.isrecord = false
				this.$nextTick(() => {
					this.getheight()
				})
			},
			// 发送
			confirm() {
				this.btn = false
				this.$emit('print', this.txt, 0)
				setTimeout(() => {
					this.txt = ''
				}, 10)
			},
			getheight() {
				var a = uni.createSelectorQuery()
				a.select('.p-main').fields({
					size: true
				}, data => {
					this.$emit('update:height', data.height)
				}).exec()
			},
			change(e) {
				// if(e.detail.lineCount == this.linecount) return
				// this.linecount = e.detail.lineCount
				setTimeout(() => {
					this.getheight()
				})
			},
			//表情添加
			send(e) {
				this.emojiarr.push(e)
				this.txt += e
			},
			focus() {
				// #ifdef H5
				this.emoji = false
				this.more = false
				setTimeout(() => {
					this.getheight()
				}, 10)
				// #endif
			},
			blur() {
				// #ifdef APP
				this.emoji = false
				this.more = false
				setTimeout(() => {
					this.getheight()
				}, 100)
				// #endif
			},
			//删除一个字符
			del() {
				if (this.txt === '') return
				var i = this.txt.length - 1
				var arr = this.txt.split(this.emojiarr[this.emojiarr.length - 1])
				if (arr[arr.length - 1] === '') {
					this.txt = this.txt.replace(this.emojiarr[this.emojiarr.length - 1], '')
					return this.emojiarr.pop()
				}
				this.txt = this.txt.slice(0, i)
			},
			changeBtn() {
				this.btn = !this.btn
			},
			//发送图片
			sendpic(e) {
				this.more = false
				this.$nextTick(() => {
					setTimeout(()=>{
						this.getheight()
					},100)
				})
				var files = []
				for (let i in e) {
					files.push({
						uri: e[i],
						name: 'file'
					})
				}
				var backstr
				uni.uploadFile({
					url: "http://localhost:3000/files/upload",
					files: files,
					name: "file",
					formData: {
						id: this.id
					},
					success: (uploadFileRes) => {
						backstr = uploadFileRes.data;
						
						if(e.length>1){
							backstr = JSON.parse(backstr)
							for(let i in backstr){
								this.$emit('print', backstr[i], 1)
							}
						}else{
							console.log(backstr);
							this.$emit('print', backstr, 1)
						}
						
						//自定义操作
					},

					fail(e) {
						console.log("this is errormes " + e.message);
					},
				});

			},
			//录音
			touchstart(e) {
				this.moveY = e.touches[0].pageY
				this.bg = true
				recorderManager.start()
				this.timer = setInterval(() => {
					this.i++
					if (this.i >= 60) {
						recorderManager.stop()
						clearInterval(this.timer)
					}
				}, 1000)

			},
			touchend() {
				recorderManager.stop()
				clearInterval(this.timer)

			},
			touchmove(e) {
				var move = e.touches[0].pageY
				console.log(this.moveY - move);
				if (this.moveY - move > 40) {
					recorderManager.stop()
					this.flag = true
				}

			},
			getmap(e) {
				this.more = false
				this.$nextTick(() => {
					setTimeout(() => {
						this.getheight()
					})

				})
				this.$emit('print', e, 3)
			}
		},
		mounted() {
			this.animation = uni.createAnimation({
				duration: 100,
				timingFunction: 'ease'
			})
			recorderManager.onStop((res) => {
				console.log(JSON.stringify(res));
				setTimeout(() => {
					this.bg = false
				})
				if (this.flag) {
					this.flag = false
				} else {
					if (this.i > 0) {
						
						uni.uploadFile({
							url: "http://localhost:3000/files/upload",
							filePath:res.tempFilePath,
							name: "file",
							formData: {
								id: this.id
							},
							success: (uploadFileRes) => {
								backstr = uploadFileRes.data;
								
								let data = {
									voice:backstr,
									time: this.i
								}
								this.$emit('print', data, 2)
								//自定义操作
							},
						});
					} else {
						uni.showToast({
							title: '说话时间太短',
							icon: 'error'
						})
					}
				}
				this.i = 0
			});
		},
		watch: {
			btn(n) {
				if (n == true) {
					this.animation.width('186rpx').step()
					this.animationData = this.animation.export()
				} else {
					this.animation.width('136rpx').step()
					this.animationData = this.animation.export()
				}
			},
			emoji(n) {
				if (n != true && this.txt.trim().length > 0) {
					this.btn = true
				} else {
					this.btn = false
				}
			},
			isrecord(n) {
				if (n) {
					this.a = "../../static/img/chatroom/voice.png"
				} else {
					this.a = '../../static/img/chatroom/jp.png'
				}
			}
		},
		computed: {
			...mapState(['id'])
		}
	}
</script>

<style lang="scss">
	.p-main {
		background-color: #f4f4f4;
		z-index: 1001;
	}

	.print {
		display: flex;
		width: 750rpx;
		min-height: 98rpx;
		padding: 14rpx 32rpx;
		align-items: center;
		box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
		box-sizing: border-box;

		image {
			width: 56rpx;
			height: 56rpx;
		}

		.input {
			flex-grow: 1;
			padding: 0 20rpx;

			textarea {
				width: 100%;
				background: #FFFFFF;
				border-radius: 10rpx;
				padding: 22rpx 16rpx;
				font-size: 24rpx;
				box-sizing: border-box;
				line-height: 25rpx;
			}

			.sound {
				border-radius: 10rpx;
				background-color: #fff;
				padding: 22rpx 16rpx;
				width: 100%;
				font-size: 24rpx;
				box-sizing: border-box;
				text-align: center;
				line-height: 25rpx;
			}
		}

		.print-right {
			display: flex;
			justify-content: space-between;
			width: 136rpx;
		}
	}

	.biaoqing,
	.more {
		width: 100%;
		height: 436rpx;
		background-color: rgba(236, 237, 238, 1);
		box-shadow: 0px -1rpx 0px 0px rgba(0, 0, 0, 0.1);
	}

	.send-btn {
		width: 120rpx;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		background-color: rgba(255, 228, 49, .9);
		border-radius: 20rpx;
		box-sizing: border-box;
	}

	.voice-bg {
		position: fixed;
		top: 0;
		bottom: 98rpx;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.3);

		.voice-time {
			position: absolute;
			width: 600rpx;
			height: 84rpx;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			background-color: rgba(255, 255, 255, .3);
			border-radius: 42rpx;

			// display: flex;
			// justify-content: center;
			.voice-time-len {
				min-width: 120rpx;
				height: 100%;
				line-height: 84rpx;
				text-align: center;
				background-color: #ffe431;
				border-radius: 42rpx;
			}
		}

		.voice-txt {
			position: absolute;
			bottom: 20rpx;
			width: 100%;
			text-align: center;
			font-size: 32rpx;
			color: #fff;
		}
	}
</style>
